<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <div class="flex flex-column">
            <div class="gh-canvas-breadcrumb">
                <LinkTo @route="settings">
                    Settings
                </LinkTo>
                {{svg-jar "arrow-right-small"}} Navigation
            </div>
            <h2 class="gh-canvas-title" data-test-screen-title>
                Navigation
            </h2>
        </div>
        <section class="view-actions">
            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
        </section>
    </GhCanvasHeader>

    <section class="gh-main-section">
        <h4 class="gh-main-section-header small bn">Primary Navigation</h4>
        <div class="gh-main-section-block">
            <div class="gh-main-section-content padding-top-s grey">
                <form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
                    <SortableObjects @sortableObjectList={{this.settings.navigation}} @useSwap={{false}}>
                        {{#each this.settings.navigation as |navItem index|}}
                            <DraggableObject @content={{navItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
                                <Settings::Navigation::NavItem
                                    @navItem={{navItem}}
                                    @baseUrl={{this.blogUrl}}
                                    @addItem={{this.addNavItem}}
                                    @deleteItem={{this.deleteNavItem}}
                                    @updateUrl={{this.updateUrl}}
                                    @updateLabel={{this.updateLabel}}
                                    data-test-navitem={{index}} />
                            </DraggableObject>
                        {{/each}}
                    </SortableObjects>
                    <Settings::Navigation::NavItem
                        @navItem={{this.newNavItem}}
                        @baseUrl={{this.blogUrl}}
                        @addItem={{this.addNavItem}}
                        @updateUrl={{this.updateUrl}}
                        @updateLabel={{this.updateLabel}}
                        data-test-navitem="new" />
                </form>
            </div>
        </div>

        <h4 class="gh-main-section-header small bn">Secondary Navigation</h4>
        <div class="gh-main-section-block">
            <div class="gh-main-section-content padding-top-s grey">
                <form id="secondary-navigation" class="gh-blognav" novalidate="novalidate">
                    <SortableObjects @sortableObjectList={{this.settings.secondaryNavigation}} @useSwap={{false}}>
                        {{#each this.settings.secondaryNavigation as |navItem index|}}
                            <DraggableObject @content={{navItem}} @dragHandle=".gh-blognav-grab" @isSortable={{true}}>
                                <Settings::Navigation::NavItem
                                    @navItem={{navItem}}
                                    @baseUrl={{this.blogUrl}}
                                    @addItem={{this.addNavItem}}
                                    @deleteItem={{this.deleteNavItem}}
                                    @updateUrl={{this.updateUrl}}
                                    @updateLabel={{this.updateLabel}}
                                    data-test-navitem={{index}} />
                            </DraggableObject>
                        {{/each}}
                    </SortableObjects>
                    <Settings::Navigation::NavItem
                        @navItem={{this.newSecondaryNavItem}}
                        @baseUrl={{this.blogUrl}}
                        @addItem={{this.addNavItem}}
                        @updateUrl={{this.updateUrl}}
                        @updateLabel={{this.updateLabel}}
                        data-test-navitem="new" />
                </form>
            </div>
        </div>
    </section>
</section>

{{outlet}}

